<template>
    <div class="loginContainer">
        <div class="logo-container">
            <img src="@/assets/ourLogo.png" class="logo" />
        </div>
        <div class="form-container">
            <el-form ref="form" :model="form" :rules="rules" class="login-form">
                <div class="user-type-container">
                    <el-radio-group v-model="userType" size="large">
                        <el-radio-button label="求职者登录"></el-radio-button>
                        <el-radio-button label="企业登录"></el-radio-button>
                    </el-radio-group>
                </div>
                <h3 class="login-title">欢迎登录</h3>
                <el-form-item label="电话号码" prop="tel">
                    <el-input
                        type="text"
                        placeholder="请输入电话号码"
                        v-model="form.tel"
                    ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input
                        type="password"
                        placeholder="请输入密码"
                        v-model="form.password"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        @click="Login"
                        class="login-button"
                        >登录</el-button
                    >
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        class="register-button"
                        @click="goToRegister"
                        >注册</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import md5 from 'js-md5'

export default {
    name: 'Login',
    data() {
        return {
            form: {
                tel: '',
                password: ''
            },
            rules: {
                tel: [
                    {
                        required: true,
                        message: '请输入电话号码',
                        trigger: 'blur'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }
                ]
            },
            userType: '求职者登录',
            id: null
        }
    },
    methods: {
        goToRegister() {
            this.$router.push('/register')
        },
        async Login() {
            // console.log(this.form)
            this.form.password = md5(this.form.password)
            this.$refs.form.validate(async (valid) => {
                if (!valid) return false
                const url =
                    this.userType === '求职者登录'
                        ? '/loginSeeker'
                        : '/loginEnterprise'
                // const {data: res} = await this.$axios.post(url, this.form)
                this.$axios.post(url, this.form).then(async (resp) => {
                    console.log(resp.data)
                    if (resp.data != null) {
                        // this.form = resp.data
                        localStorage.setItem(
                            'access-od',
                            JSON.stringify(resp.data)
                        )
                        if (this.userType === '求职者登录') {
                            // 获取id
                            await this.$axios
                                .get('/seeker/getIdByTel?tel=' + this.form.tel)
                                .then((resp) => {
                                    this.id = resp.data
                                })
                            this.$store.commit('setId', this.id)
                            this.$store.commit('setUserType', this.userType)
                            await this.$router.push({
                                path: '/seekerView',
                                query: { id: this.id, userType: this.userType } // 将id传递给seekerView页面
                            })
                        } else {
                            // 获取id
                            await this.$axios
                                .get(
                                    '/enterprise/getEnterpriseIdByTel?tel=' +
                                        this.form.tel
                                )
                                .then((resp) => {
                                    this.id = resp.data
                                })
                            this.$store.commit('setId', this.id)
                            this.$store.commit('setUserType', this.userType)
                            await this.$router.push({
                                path: '/enterpriseView',
                                query: { id: this.id, userType: this.userType } // 将id传递给enterpriseView页面
                            })
                        }
                    } else {
                        this.$message({
                            message: '用户名或密码错误',
                            type: 'warning'
                        })
                        return false
                    }
                })
            })
        }
    }
}
</script>

<style>
.loginContainer {
    display: flex;
    height: 100vh;
    background: url('@/assets/back.jpg') no-repeat center center fixed;
    background-size: cover;
    padding: 20px;
    align-items: center;
}

.logo-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    max-width: 100%;
    height: auto;
}

.form-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-form {
    width: 100%;
    max-width: 400px;
    padding: 40px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.user-type-container {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.login-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 500;
    color: #333;
}

.login-button,
.register-button {
    width: 100%;
    height: 40px;
}
</style>
